<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column label="序号" width="50" align="center">
      <template #default="{ $index }">
        <span>
          {{ $index + 1 }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="100" />
    <el-table-column prop="cookie" label="cookie" show-overflow-tooltip />
    <el-table-column prop="aid" label="aid" />
    <el-table-column prop="uuid" label="uuid" />
    <el-table-column
      prop="_signature"
      label="_signature"
      show-overflow-tooltip
    />
    <el-table-column prop="end_day" label="过期时间">
      <template #default="{ row }">
        <span style="font-weight: bold; color: red">
          还剩 {{ row.end_day }} 天过期
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="status" label="过期状态" width="100">
      <template #default="{ row }">
        <span v-if="row.status == 1" style="font-weight: bold; color: #67c23a"
          >正常</span
        >
        <span v-else style="color: red; font-weight: bold">过期</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="400">
      <template #default="{ row }">
        <el-button type="success" plain @click="handleSet(row)" size="mini"
          >测试</el-button
        >
        <el-button type="warning" plain @click="handleEdit(row)" size="mini"
          >修改</el-button
        >
        <el-button type="primary" plain @click="handleJournal(row)" size="mini"
          >日志</el-button
        >
        <el-popconfirm title="确定要删除该条信息吗?" @confirm="del(row)">
          <template #reference>
            <el-button type="danger" plain size="mini">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <!-- <el-pagination
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :total="num"
    ></el-pagination> -->
  </div>
  <Dialog ref="addInfo" :type="type" :reload="getData" />

  <!-- 状态 -->
  <el-dialog v-model="dialogVisible" title="日志详情" width="50%">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="签到" name="first">
        <el-table :data="gridData" border style="width: 100%">
          <el-table-column prop="created_at" label="时间" />
          <el-table-column prop="content.err_msg" label="内容" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="抽奖" name="second">
        <el-table :data="gridData" border style="width: 100%">
          <el-table-column prop="created_at" label="时间" />
          <el-table-column prop="content.data.lottery_name" label="内容" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from "vue";
import { ElMessage } from "element-plus";
import Dialog from "./dialog.vue";
import axios from "@/utils/axios";
export default {
  components: {
    Dialog,
  },
  props: {
    searchInfo: Object,
  },
  setup(props) {
    const addInfo = ref(null);
    const state = reactive({
      tableData: [],
      gridData: [],
      num: 0,
      currentPage: 1,
      logId: "",
      type: "add",
      dialogVisible: false,
      activeName: "first",
    });
    onMounted(() => {
      getData();
    });
    const getData = () => {
      let httpOption = axios.get;
      let params = {
        ...props.searchInfo,
        page: state.currentPage,
      };
      httpOption("/api/admin/juejins", params).then((res) => {
        state.tableData = res.data;
      });
    };
    const handleCurrentChange = (e) => {
      state.currentPage = e;
      getData();
    };
    const handleEdit = (row) => {
      state.type = "edit";
      addInfo.value.open(row);
    };
    const del = ({ id }) => {
      let httpOption = axios.delete;
      httpOption(`/api/admin/juejins/${id}`).then((res) => {
        if (res.status === 1) {
          ElMessage.success(res.reason);
          getData();
        } else ElMessage.error(res.reason);
      });
    };
    const handleSet = ({ id }) => {
      let httpOption = axios.get;
      httpOption(`/api/admin/juejinSign?id=${id}`).then((res) => {
        if (res.reason.err_no == 15001) {
          ElMessage.success("填入信息符合,通讯成功");
        } else ElMessage.error("信息有误,无法通讯");
      });
    };
    const handleJournal = ({ id }) => {
      state.logId = id;
      state.dialogVisible = true;
      state.activeName = "first";
      getLog(id, 1);
    };
    const getLog = (id, type) => {
      let httpOption = axios.get;
      httpOption(
        type
          ? `/api/admin/juejinsLog?id=${id}&type=${type}`
          : `/api/admin/juejinsLog?id=${id}`
      ).then((res) => {
        if (res.length) {
          state.gridData = res;
        } else state.gridData = [];
      });
    };
    const handleClick = (tab, event) => {
      let id = state.logId;
      if (tab.props.name == "second") {
        getLog(id, 2);
      } else {
        getLog(id, 1);
      }
    };
    return {
      addInfo,
      handleEdit,
      getData,
      handleCurrentChange,
      handleJournal,
      handleClick,
      handleSet,
      del,
      ...toRefs(state),
    };
  },
};
</script>
<style lang='scss' scoped>
</style>